<template>
  <div v-show="pageType === 'VIEW'" class="view-equip-detail">
    <div class="view-task-detail">
      <div class="view-task-title">
        <px-button type="primary" icon="ArrowLeft" @click="emits('backMainPage')">返回</px-button>
      </div>
      <div>
        <px-button v-has="'ERC_ALARM_EVENT_DELETE'" type="danger" plain @click="handleDelete">删除</px-button>
        <px-button v-has="'ERC_ALARM_EVENT_EDIT'" type="primary" plain @click="handleEdit">编辑</px-button>
        <px-button v-has="'ERC_ALARM_EVENT_CALL'" type="success" @click="handleCall">打电话</px-button>
      </div>
    </div>
    <div class="view-equip-title">基础信息</div>
    <div class="view-equip-wrap">
      <div class="view-equip-content">
        <div class="view-equip-item">
          <div class="label">报警时间</div>
          <div class="text">{{ detailData?.alarmTime }}</div>
        </div>
        <div class="view-equip-item">
          <div class="label">地块</div>
          <div class="text">{{ detailData?.factoryAreaName }}</div>
        </div>
        <div class="view-equip-item">
          <div class="label">责任区</div>
          <div class="text">{{ detailData?.responsibleZoneName }}</div>
        </div>
      </div>
      <div class="view-equip-content">
        <div class="view-equip-item">
          <div class="label">应急指挥官</div>
          <div class="text">
            <span v-for="item in detailData?.commanderList" :key="item.id" class="mr-2"> {{ item.commanderName }}</span>
          </div>
        </div>
        <div class="view-equip-item">
          <div class="label">事件类型</div>
          <div class="text">{{ detailData.alarmTypeName }}</div>
        </div>
        <div class="view-equip-item">
          <div class="label">文档名称</div>
          <div class="text">
            <span v-for="item in detailData.docList" :key="item.docId" effect="plain">
              {{ item.docName }}
            </span>
          </div>
        </div>
      </div>
      <div class="view-equip-content">
        <div class="view-equip-item plus">
          <div class="label">事件说明</div>
          <div class="text">{{ detailData.alarmContent }}</div>
        </div>
      </div>
    </div>
    <div class="view-equip-title">录音文件</div>
    <FileUpload fileType="view" :fileList="detailData.recordingFile" style="margin-bottom: 18px" />
    <div class="view-equip-title">通话记录</div>
    <px-table :data="detailData.selectEqpData" class="equip-table" max-height="400px" style="margin: 20px 0" size="small" border>
      <px-table-column type="index" label="序号" min-width="56" />
      <px-table-column prop="typeName" label="应急指挥官" min-width="234" show-overflow-tooltip />
      <px-table-column prop="eqpId" label="通话时间" min-width="234" show-overflow-tooltip />
      <px-table-column prop="eqpName" label="是否接通" min-width="234" show-overflow-tooltip />
      <px-table-column prop="facName" label="通话时长" min-width="234" show-overflow-tooltip />
    </px-table>
  </div>
</template>

<script setup lang="ts">
import { editAlarmEvent, getAlarmEventDetail } from "@/api/erc/alarm";
import FileUpload from "@/components/Upload/FileUpload.vue";
import { downloadPic } from "@visual/api/api";
import { PxMessage, PxMessageBox } from "px-ui";
import { ref, watchEffect } from "vue";

// 调用父级-返回主页、查询列表方法
const emits = defineEmits(["backMainPage", "queryTable", "handleEdit"]);

const props = defineProps(["alarmId", "pageType"]);

const detailData = ref<Record<string, any>>({});

watchEffect(async () => {
  if (props.pageType === "VIEW") {
    const detail = await getAlarmEventDetail({ alarmId: props.alarmId });
    const res = await downloadPic({ ids: [detail.recordingFile] });
    detailData.value = { ...detail, recordingFile: res };
  }
});

const handleCall = (row: any) => {
  PxMessage.warning("暂时无法拨打电话");
  // isShow.value = true;
};

const handleEdit = () => {
  emits("handleEdit", detailData.value);
};

// 删除
const handleDelete = async (row: any) => {
  PxMessageBox.confirm(`要删除当前报警事件吗？删除后不可恢复，请谨慎操作`, "提示", {
    confirmButtonText: "删除",
    confirmButtonClass: "px-button--danger",
    cancelButtonText: "取消",
    type: "warning",
    draggable: true
  })
    .then(async () => {
      await editAlarmEvent({ alarmId: detailData.value.alarmId, status: "INVALID" });
      PxMessage.success("删除成功");
      emits("backMainPage");
      emits("queryTable");
    })
    .catch(() => {});
};
</script>

<style lang="scss" scoped>
@import url("@/views/erc/scss/view-detail.scss");

.view-equip-detail {
  padding: 20px;
  box-sizing: border-box;
}

.view-task-detail {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;

  .view-task-title {
    // width: 25%;
    display: flex;
    flex-direction: row;
    align-items: center;

    .text {
      margin-right: 8px;
      margin-left: 16px;
      font-size: 20px;
      font-weight: 600;
      line-height: 1;
      color: rgb(0 0 0 / 90%);
    }
  }
}
</style>
